<template>
  <!-- 左边第3     设备连接异常 -->
  <div class="wrapper">
    <div id="myChart2"></div>
  </div>
</template>

<script>
//    设备异常 分析
import { equipmentAbnormal } from "@/api/demo.js";

export default {
  components: {},
  props: {},
  data() {
    return {
      //  配置数据
      options2: {
        
        color: ["#2f89cf"], // 柱子的颜色
        selectlist:[3,4,2,5,4],
        tooltip: {
          trigger: "axis", // 触发类型  柱子 或者  坐标触发
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          // 防止鼠标事件 频繁触发 防止抖动
          transitionDuration: 0,
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10%",
          right: "0%",
          bottom: "5%",
          containLabel: true, // 可以理解为 y轴在 图表里面
        },
        xAxis: [
          {
            type: "category", // x 轴的类型
            data: ["办公", "大门门禁", "会议门禁", "机房门禁", "传感器"],
            // data: [],
            axisTick: {
              // 坐标轴刻度相关
              alignWithLabel: true, // 这个 false 和 true 有什么区别????
            },
            // 修改刻度标签 相关样式
            axisLabel : {
              color: "rgba(255,255,255,.5)",
              fontSize: 10,
              // rotate: 30,
                //坐标轴刻度标签的相关设置。
                formatter : function(params){
                   var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 4;// 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";// 表示每一次截取的字符串
                                    var start = p * provideNumber;// 开始截取的位置
                                    var end = start + provideNumber;// 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串
                                }

                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName
                }

            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 12,
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: "35%",
            //  num 数量
            data: [10, 5, 3, 4, 6],
            // data: [], // 请求后端数据
            itemStyle: {
              // 修改柱子渐变颜色
              normal: {
                barBorderRadius: [2, 2, 0, 0],
                // 四个属性: 右下左上
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,  
                  color: "#3167ee" // 0% 处的颜色
                },  {
                  offset: 0.5,
                  color: "#89509d" // 50% 处的颜色
                }, {
                  offset: 1,
                  color: "#f4343b" // 100% 处的颜色
                }], false)
              },
              // 修改柱子圆角
              // barBorderRadius: 3
            },
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    //  echarts 不用管
    async drawLine() {
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制基本图表
      myChart2.setOption(this.options2);

      //  自己的代码    设备异常-------------------------------------
      const { data: res } = await equipmentAbnormal();
      console.log("获取设备异常数据",res)
      if (res.code == 200) {
        // res.result   是一个数组    数量 和   名字
        console.log(res.result);
        var yichangNum = res.result.map((e) => {
          return e.deviceNum;
        });
        var yichangName = res.result.map((e) => {
          return e.deviceName;
        });

        // for(var i=0;i<yichangNum.length;i++){
        //   if(yichangNum[i]==0){
        //     yichangNum[i]=selectlist[i]
        //   }
        // }

        myChart2.setOption({
          series: [{ data: yichangNum }],
          xAxis: [{ data: yichangName }],
        });
        // console.log("成功获取222 --设备异常  数据");
      }

      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.drawLine();
  },
};
</script>
<style lang="scss" scoped>
#myChart2 {
  width: 98%;
  height: 83%;
  /* background-color: pink;
  background: url('../../images/aj.jpg') no-repeat;
  opacity: 0.3; */
}
</style>